PhineX Lab | الخطوة 6

PhineX / الإضافة الديناميكية

6/8

الخطوة ٦

إضافة ألعاب ديناميكية

سنجعل المستخدم قادراً على إضافة ألعاب جديدة للجدول دون تعديل الكود — هذا هو جوهر تطبيقات الويب!

المهام

١

أضف في HTML وسم <form id="addForm"> يحتوي على: <input id="nameIn" placeholder="Game Name"> و <input id="priceIn" placeholder="Price"> وزر <button type="button" onclick="addNewGame()">Add Game</button>

٢

في CSS: #addForm { display: flex; gap: 10px; margin-bottom: 12px; }

٣

في JS: أكمل وظيفة addNewGame() باستخدام insertRow(-1) لإضافة صف جديد

💡 insertRow:

let row = table.insertRow(-1);

row.innerHTML = `<td>${name}</td><td>${price}</td>`;

1

localhost / index.html

◀ السابق

التالي ▶